<template>
    <Header title="第三章 间距" />
    <div class="w-full p-4 bg-white shadow-sm">
        <Section title="padding">
            <p class="mb-2">用于控制元素填充的工具。</p>
            <ul class="flex space-x-2">
                <li class="p-10 bg-sky-400 rounded-2xl"></li>
                <li class="p-10 bg-sky-400 rounded-2xl"></li>
                <li class="py-10 px-20 bg-sky-400 rounded-2xl"></li>
                <li class="p-10 bg-sky-400 rounded-2xl"></li>
            </ul>
        </Section>
        <Section title="margin">
            <p class="mb-2">用于控制元素边距的工具。</p>
            <ul class="flex space-x-2 text-white font-bold">
                <li
                    class="size-20 bg-sky-400 mr-2 flex justify-center items-center"
                >
                    01
                </li>
                <li
                    class="size-20 bg-sky-400 mr-2 flex justify-center items-center"
                >
                    02
                </li>
                <li
                    class="size-20 bg-sky-400 ml-auto flex justify-center items-center"
                >
                    03
                </li>
            </ul>
        </Section>
    </div>
</template>

<script setup>
import Header from "../../components/title";
import Section from "../../components/section";
</script>

<style></style>
